#tree {
    overflow: auto;
    flex: 0 0 auto;
    order: 1;

    padding: 32px 32px 32px 16px;
    white-space: nowrap;
    max-width: 250px;
    overflow-x: hidden;

    a, a:active, a.visited {
        display: block;
        margin-left: 20px;
        padding: 3px 0;
        text-decoration: none;
        color: @col-text;

        &:hover {
            color: @col-text-hover;
        }
    }

    .active > a {
        font-weight: bold;
    }

    .indicator {
        display: block;
        float: left;
        padding: 3px 0;
        position: relative;
        top: -2px;
        cursor: pointer;

        img {
            // .eased-transition;
            width: 20px;
            height: 20px;
            zoom: 1;
        }
    }

    .item {
        clear: left;

        &.open > .indicator img {
            transform: rotate(90deg);
        }
        &.unknown > .indicator {
            opacity: 0.3;
        }
        &.none > .indicator {
            opacity: 0;
            cursor: inherit;
        }
        &.unknown > .content, &.none > .content, &.closed > .content {
            display: none;
        }
    }

    .icon {
        position: relative;
        top: -2px;

        img {
            width: 20px;
            height: 20px;
        }
    }

    .label {
        margin: 0 0 0 4px;
    }

    .content {
        margin: 0;
        padding: 0 0 0 20px;
    }

    .summary {
        color: @col-text-disabled-black;
        padding: 0 0 0 8px;
    }
}
